<template>
  <div
    id="gantt_chart1"
    v-if="state.tasks.data"
    style="min-height: 500px; min-width: 800px"
  ></div>
</template>

<script setup>
import { gantt } from 'dhtmlx-gantt'
import { ElIcon } from 'element-plus'
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
import {
  onMounted,
  reactive,
  watch,
  onUnmounted,
  onBeforeUnmount
} from 'vue'
const props = defineProps({
  ganttList: {
    type: Array,
    default: () => {
      return [{ start_date: '2020-05-01' }, { start_date: '2020-05-09' }]
    }
  }
})
const state = reactive({
  tasks: {
    data: props.ganttList
  }
})

//初始化
const init = () => {
	gantt.config.scale_unit = "month"; //按月显示
	gantt.config.date_scale = "%Y-%m"; //设置时间刻度的格式（X轴） 多个尺度
	gantt.config.readonly = true;
	// gantt.config.scale_height = 38; //设置时间刻度的高度和网格的标题

  gantt.config.subscales = [{ unit: 'day', step: 1, date: '%j日' }] //指定第二个时间刻度

  gantt.init('gantt_chart1')

  gantt.config.autofit = true

  gantt.config.columns = []
  state.tasks.data = props.ganttList
  gantt.config.tasks = state.tasks
  gantt.parse(state.tasks)

  gantt.render()
  if (!state.tasks.data) {
    gantt.clearAll()
  }
}
const clearHandler=()=>{
  gantt.clearAll()
}
defineExpose({
  init,
  clearHandler
})
// onMounted(() => {
//   // 先销毁
//   gantt.clearAll()
//   init()
// })
</script>
<style lang="scss" scoped>
:deep(.gantt_container) {
  .gantt_task_line {
    background-color: #ff7b50;
    border: 0px;
  }
  
  .gantt_file {
    display: none;
  }
  
  .gantt_grid_scale {
    line-height: 48px !important;
  }
  .gantt_task_scale,.gantt_grid_scale {
    height: 48px !important;
  }
}
</style>
